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One Minute Paper 



• Used as Feedback from you to me 

• Anonymous 

• Take a piece of paper and use for front 

for positive feedback and the back for 
negative feedback 

• Do this at the end of the lecture 




• This will be repeated at in January and at 
the end of the course. 
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Central Question 



What is the optimal representation of 
data, which humans understand as good 
as possible to finally reach an optimal 

decision ? 
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Semiotics 



“Semiotics is the science of symbols and 
signs (processes) in nature and culture. 
Symbols and signs transfer information 
in time and space. Without semiotics, 
cognition, communication, and cultural 
meaning would not be possible." 



Translated from the German source of the DSG - Deutsche Gesellschaft 

fur Semiotik, www.semiose.de 

Pioneers: C.S. Peirce, F. de Saussure 
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Semiotics and Visualization 



• Information visualization is about diagrams and how these enable and 
support the understanding of information 

• Diagrams are composed by symbols and signs 

• The meaning of symbols and signs emits from socio-cultural 
conventions, which are established in person-to-person communication 

• Visual perception is thereby out of the sight of philosophy and nominalitic 
irrelevant to understand the code 

Nevertheless, visual perception should be considered in the creation of 
visual languages to minimize the learning effort necessary to 
understand the visual code. 
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Semiotics and Visualization 



Cave Painting 




http://creepypasta.wikia.com/wiki/The_Angel_of_lndustry, accessed on 2014-10-15 
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Semiotics and Visualization 



VR Diagram 



Optics Head tracker 
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Semiotics and Visualization 



Equation 
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r 

Semiotics and Visualization 



L 



Why are pictographic representations simpler to 
understand than abstract representations, such as 

mathematical equations? 



• Higher degree of experience with pictographic representations 

• Represented concepts are better known as those more abstract 
representations are used 
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Attempt to Explain 



• Pearson et al. (1990) believe that similar sub-processes in the visual 
perception are triggered if a pictographic representation or the 
represented object are perceived 

• Conventions play a central role in perception, especially if the context of 
pictographic representation has been removed 

• The same data is represented, where the left representation is simpler 
to understand because the visual cortex contains mechanisms for 
following continuous lines. 
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Overview 



•Introduction - DONE 

•Sensory vs. Arbitrary Symbols 
•The Human Eye 
•Luminance, Contrast, Color 
•Gestalt Psychology 
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Sensory vs. Arbitrary Symbols 



Sensory: Referenced symbols and visualizing processes achieve their 
meaning through the human perceptual and cognitive system in the brain 

-> There is no learning necessary 

Arbitrary: Referenced symbols and visualizing processes have to be 
learned and are thereby independent from the human perceptional 
system Learning is necessary 

Example: The word DOG as set of characters or symbols has no 
reference to the animal, which is meant here 

In general: Both, sensory and arbitrary symbols occur as combination 
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Sensory vs. Arbitrary Symbols 



Sensory Symbols 

• Effective representation of information because of the early cognitive 
processing in neuronal processes 

• Stability regarding cultural influences 

Arbitrary Symbols 

• Direct dependency on cultural influence 

• Somehow ..programmable" 



-> Sensory sensing is more efficient but more static 4- 
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Pathways 




DORSAL PATHWAYS 



VENTRAL PATHWAYS 



Eye movement control 
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Faces, 
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short-term 
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Dynamic form 

Visually guided 
motion, 

transient system 




Color, 

elements of form, 
attention 



Object perception, 
color constancy, 
attention, 
faces, 

sustained system 



Filtering for orientation, 
color, stereo depth 
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General Model of Visual Perception 
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Characteristics of Sensory Perception 

L 



Understanding without training 



Sensory code is code, which can be understood without additional training 




Segmentation of a liver to identify tumors 
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Characteristics of Sensory Perception 



Resistant to Explanation 

Various sensory phenomena, such as optical illusions are resistant to 
their explanation 
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Characteristics of Sensory Perception 



Sensory Directness 



Specific types of processing is hard wired and very fast 
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Characteristics of Sensory Perception 



Cross-Cultural Validity 

• Sensory code is valid over cultures and are understood in the same 
way in front of different cultural backgrounds. 

• This assertion looses its validity if the sensory code is overwritten by 
cultural agreements. 
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Characteristics of Arbitrary Representations 



Hard to Learn 

Arbitrary codes and representations are hard to learn, such as reading 
and writing. 



Easy to Forget 

Arbitrary information is simple to forget if it is not learned by heart. 

Embedded into Cultural Context 



Arbitrary codes and representations depend on culture and applications. 
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The Human Eye 

L 





Eye muscles 



Cornea 



Fovea 



Blind spot 



Retinal arteries 
and veins 
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The Human Eye - Visual Angle 



• 1cm object (h) in 57cm distance (d) match 1° 





= 2 arc tan 



f M 

y 2 d y 
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The Human Eye - Lens 



• The lens has the task to focus the (inverse) image on the retina 




11 1 

f d r 



• 17mm focal length, 40 to 59 Dioptrin refraction 
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Excursion: Lensmaker‘s Equation 




http://upload. wiki media. org/wikipedia/commons/9/96/Sammellinse.svg 
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The Human Eye - Depth of Field 



ti 



Die Blende verandern (mit 70-mm-Objektiv, Scharfe bei 10 m) 
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The Human Eye - Chromatic Aberration 



• Appears in optical systems 
through refraction 

• Light is a mixture of different 
wave lengths, which are 
refracted in different ways 




• A mixture of different lens 
materials can reduce the effect 

• The human eye is NOT 
corrected 




http://olypedia.de/Bild:Lens_chromatic_aberration_Wikimedia.png 
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The Human Eye - Chromatic Aberration 



Aberration 



B |V Dr.-lng. Benjamin Weyers | Virtual Reality & Immersive Visualization | WS2015/16 | 

Course on Data Analysis and Visualization 




Visual Computing 
Institute 



liWIHMMN 

UMVERSITY 




The Human Eye - Chromatic Aberration 




http://www.roesener.homepage.t-online.de/ausschnitt.jpg 
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The Human Eye - Receptors 



• The retina contains mainly two types of receptors 
- Rods (100 million), intensity perception 

Cones (6 million), perception of colors: red, green, blue 



• The sharpest point of the retina is located in the center of the retina 
(fovea centralis), which solely contains cone cells. 




The Human Eye - Visual Acuity 



Point acuity (1 minute of arc): 
The ability to resolve two distinct 
point targets. 



Grating acuity (1-2 minutes of arc): 
The ability to distinguish a pattern 
of bright and dark bars from a 
uniform gray patch. 



Letter acuity (5 minutes of arc): 

The ability to resolve letters. 

The Snellen eye chart is a standard 
way of measuring this ability. 20/20 
vision means that a 5-minute letter 
target can be seen 90% of the time. 
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The Human Eye - Visual Acuity 



Stereo acuity (1 0 seconds of arc): 

The ability to resolve objects in 
depth. The acuity is measured 
as the difference between two angles 
(o and b) for a just-detectable 
depth difference. 



Vernier acuity (1 0 seconds of arc): 
The ability to see if two line 
segments are collinear. 
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Percentage of maximum 



The Human Eye - Visual Acuity 
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Nose 



The Human Eye - Visual Field 
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The Human Eye - Space-Contrast-Sensitivity 



a 
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The Human Eye - Visual Stress 



fl 
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Overview 



• Introduction 

•Sensory vs. Arbitrary Symbols 
•The Human Eye 

•Luminance, Contrast, Color 

•Gestalt Psychology 
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General Problem 



The visual system is based on relative 
perception, NOT an absolute sensing of 

light. 

Question: How does a beamer show black 
(meaning no light) on the wall? Answer: 

Simply not... 
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General Problem 



No measurement of light, but measurement 

of light differences. 
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Receptors and Neurons 



• The basic principal of neurons is to constantly generate electrical 
pulses 

• Neurons can be stimulated or inhibited by other neurons, which 
increases or decreases the number of pulses a neuron generates 

• Receptor show specific areas that react on specific stimuli - here light 



These stimuli are transferred into electric pulses, which act as 
stimulation or inhibition 



Netzhaut 



Richtung der Informationsiibertragung 



Lichtsinneszellen 




Lichteinfall 



zum Sehnerv 



Zapfen Stabchen 

Pigmentschicht 




Axone der Ganglienzellen Horizontalzellen 
Ganglienzellen 



Schaltzellen 



http://www.biokurs.de/skripten/12/bsl2-36.htm 
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Lateral Inhibition 




http://de.wikipedia.org/w/index. php?title=Datei:Laterale_lnhibition.jpg&filetimestamp=20070206165547 
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Activation Model 



• Difference of Gaussians model, short DOG 



f(x) = a 1 e 



f \ 
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f \ 


X 




X 


l w l J 


-a 2 e 
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X Distance to sensitive point 

OCy , 0^2 Strength of activation or inhibition 

Wj , W 2 Width of the active center and width of the surrounding area 
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Response rate 



DOG 



''On" response to light in the center 
"Off" response to light in the surround 



b. 
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Cevreull Illusion 




http://www.psy.ritsumei.ac.jp/~akitaoka/Chevreulillusion.jpg 
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Overview 



• Introduction 

•Sensory vs. Arbitrary Symbols 
•The Human Eye 

•Luminance, Contrast, Color 

•Gestalt Psychology 
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Luminance, Brightness, and Lightness 



• Luminance: The amount of measured light emitted from any point in 
space. This is the only term of the three relating to a physically 
measurable quantity. 

• Brightness: The perceived amount of light from any point in space. 
Only self-emitting light sources are considered in this context; 
brightness of a color is not meant here. 

• Lightness: The perceived reflection characteristic of a surface. A white 
surface is maximal light, a black one maximal dark. Shade of a color is 
also addressed by the term lightness. 
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Luminance 



• Physical dimension, which defines the 
quantity of light in the visible spectrum 

• Luminance is defined as light energy 
weighted by the spectral sensitivity of 
the human eye -> V (A) 

• V (A) is defined by the CIE 
standardization commission 



445 nm 535 nm 575 nm 




http://hyperphysics.phy-astr.gsu.edu/hbase/vision/colcon.html 
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Light distribution 

Wave length dependent sensitivity 
Wave length 

Candela per square meter 
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• Brightness defines the perceived amount of light, which is a highly non- 
linear cognitive magnitude 

• Stevens (1961) derived a simple relation between luminance and 
brightness 



S = al n 



Bri = Lum n 

$ Perceived Brightness 



/ Light Intensity 



fl Depending on the size of the (perceived) object, e.g., n = 0.333 in case of a 
round light spot or n=0.5 for a point light source 
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Lightness 



• The human eye is able to process color correctly independent from the 
current Luminance 

• The perceived difference of lightness is not bigger than a factor of 2 if a 
person comes from sunlight to a room (after adaption) 

• In general: lightness is constant 
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Contrast 



• Contrast defines the difference between light and dark parts of an 
image 

• Contrast can be defined as a local (image contrast) or global (gradient) 
phenomena 




L 



max 



L 



mm 




• L(max/min) specifies the lightest and darkest part in an image 
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Color 



• Color is not a central aspect of visual perception 

There are many people out there who do not know that they are color blind 

• Nevertheless, for the representation of information, color is an 
important issue 

• Color is needed for the differentiation of objects, as far as luminance 
and brightness are not always enough 





Tri-chromatic Theory 



• Color perception is only dedicated to the cones 



• There are three types of cones, which indicate the tri-chromatic theory 



Monitor: Red, Green, Blue 
- Art: Red, Blue, Yellow 

Printer: Cyan, Magenta, Yellow 

• The goal of a color system should 
not be to represent the correct 
combination of wave lengths but 
the right amount of light 
combined from the three parts 




http://www.jands.com.au/ data/assets/image/0013/27130/cones_web.jpg 



• This combination directly 

depends on the sensitivity of the C = rR + gG + bB 
receptors 
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Color Metric 



L 




black 

0 , 0 

# 0000 



yellow 
255 , 0 
# FFOO 



fuchsia 
0 , 255 

« OOFF 



green 
255 , 0 
» FFOO 



cyan 

255 , 255 

» FFFF 



blue 
0 , 255 
# OOFF 



http://www.webmaster-crashkurs.de/bilder/farbmodell-additive-farbmischung.png 





http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Additive_RGB_Circles- 

48bpp.png/220px-Additive_RGB_Circles-48bpp.png 
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CIE Color System / Standard 



• This model is based on a reference pattern of human visual perception 

• The color system thereby represents the color perception of one 
hypothetic (reference) person 

• The CIE color model is based on three fictive base-colors, the so called 
tri-stimuli X, Y, Z 



To create this reference model, various persons were confronted with 
the combination of three light sources (700, 546, and 436 nm), which 
has been transformed afterwards 



a 
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CIE XYZ color model 



• The transformation has been made along the following requirements: 

All tri-stimuli (TS) are positive for all colors. This is the reason why the TS do 
not have a correct physical interpretation. 

X and Z do not have any luminance information. Only Y specifies luminance 
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CIE XYZ color model 



Black point 

( 0 , 0 , 0 ) 
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CIE XYZ color model 



• To simplify the model, chromatic coordinates have been specified to 
split up the XYZ model into one luminance and 2 chromatic channels 

x = X/(X+Y + Z ) 
y = Y/(X + Y + Z) 

z = Z/(X+Y + Z) 



• A color is defined as: 



C = (x,y,Y) 



• Because x+y + z = 1, it is enough to encounter only x and y, where Y is 

the luminance x=y- 

• Reversion of this transformation can then be defined as: y 

Y = Y 



Z = ( 1-x-y) — 

y 
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Chromatic Diagram 



• Every mixture of two 
colors, which are 
represented as two points, 
is lying on the line between 
these points 

• Any three colors specify a 
Gamut of these colors 

• The „violet“ boundary 
represents the chromatic 
values of the visible 
spectrum as straight line 

• The distance in the 
diagram does NOT specify 
the distance in the 
perception 
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CIElab and CIEluv 



• The last point is solved by the color models called CIElab and CIEluv 



L* = 116(Y/F ) 1/3 -16 

/ L 

W* = 13L*(w'-w' n ) With 
v* = 13L*(v'-v' ) 

/ L 



AX 

11 - X+15F + 3Z 
9Y 

V ~ X+15Y + 3Z 





4 ^„ 

X n +15Y n +3Z n 

9 K 

X n+15Y„+3Z n 



(X n ,Y n ,Z n ) is the reference white 

The distance between two colors can be 
calculated as follows: 




/( AL *) 2 + ( Am *) 2 + ( Av *) 2 




0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 
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Opponent Process Theory 



Long (red) 




Luminance 



Short (blue) 





a 




http://www.jands.com.au/ data/assets/image/0013/27130/cones_web.jpg 
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1 . Spatial 
Sensitivity: 

The efficiency 



cnanneis is omy 

one third of that 

of the 

luminance 

channel 

concerning 

details 



1 . Spatial 
Sensitivity: 

The efficiency 



I a. I ii i<3io io ui \iy 

one third of that 

of the 

luminance 

channel 
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Characteristics of Color 



2. Stereoscopy is close to being exclusively based on the luminance 
channel 

3. Perception of movement is also mainly based on luminance 

4. The form of an object is mainly based on luminance gradients not 
on chromatic gradients 




B 
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Why using color? 



• Color is NOT able to... 

- ...represent the form or alignments of objects 

- ...estimate distances 

- ...remember objects, or 

...recognize small elements in a certain distance. 

• Color IS able to.. 

...represent attributes of an object (not its characteristics) 

• Relevant are color contrast and saturation 



• Brown is a special color, because it is a dark yellow but is not 
recognized as such 
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Overview 



• Introduction 

•Sensory vs. Arbitrary Symbols 
•The Human Eye 
•Luminance, Contrast, Color 

•Gestalt Psychology 
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Iconic Buffer 




Which objects did you 

? 9 

Make a list! 




} 
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Iconic Buffer 







} 
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Iconic Buffer 



• The iconic buffer is able to store up to 7 objects, until short term 
memory is exhausted (3-7 chunks) 

• The limitations of the iconic buffer are 

- Decay of the buffer 

- Speed for reading from the buffer 

- Limited number of storable items (max 7) 
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Pre-attentive Processing 



• Pre-attentive processing describe the cognitive process of perceiving 
objects before they are intentional realized 

14159265358979323846264338 

32795028841971693993751058 

20974944592307816406286208 

99862803482534211706798214 

80865132823066470938446095 

50582231725359408128481117 

45028410270193852110555964 

• Objects are perceived pre-attentive, if the 900 L 

time to perceive these objects is constant | 
with an increasing number of distractors I 700 _ 

Ol 

• Rule of thumb: Everything what is processed { 

faster than 1 0ms per item is pre-attentive ‘ *»- » 

1 I I 

3 6 12 
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Pre-attentive Processing 



Orientation 





Curved/straight 




Gray/value 




Pre-attentive 

Shape 




Enclosure 




Shape 
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J 
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Size 




Addition 




Juncture 



Parallelism 
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Pre-attentive Processing 



Form 

• Line orientation 

• Line length 

• Line width 

• Co-linearity of lines 

• Size 

• Roundness 

• Spatial grouping 

• Additive markings 

• Number 



Color Movement 

• Color • Flicker 

• Intensity • Direction 

Spatial Position 

• 2D Position 

• Stereoscopic depth 

• Convex and concave shading 
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Pre-attentive Processing 



• These concepts can be combined, such as used in geographic maps 
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Pre-attentive Processing 

L 



- Buildings 

- Aim for infantry 
Furthermore: 

Visibility of enemy and friend 
Visibility of suspects 




Pre-attentive processing should be the basic concept for the creation of 
symbol sets 



Example: Military maps 
Aim for planes 
- Aim for tanks 



Aircraft 


| | Suspected 


Infantry 


HH Hostile 


fjj Building 


Friendly 


# Tank 








i 
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Overview 



• Introduction 

•Sensory vs. Arbitrary Symbols 
•The Human Eye 
•Luminance, Contrast, Color 

•Gestalt Psychology 



fl 
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Gestalt Psychology 



• Gestalt laws of grouping 

- Law of Proximity 

- Law of Similarity 
Law of Closure 
Law of Symmetry 
Law of Common Fate 
Law of Continuity 






Him 

iliili 

Off Off 







e A * 

A A 

V 





♦ ♦♦♦♦ 



• o • o • o 

• o • o • c 

• o • o • o 

• o • o • o 

• o • o • o 

• o • o • o 




http://en.wikipedia.Org/wiki/Gestalt_psychology#mediaviewer/File:Gesta lt_Principles_Composition.jpg 
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r 



Law of Proximity 

L 



Things that are spatial close together are perceived 

as belonging together 

• This law has been identified as the strongest of all Gestalt laws 



(a) 



(b) 
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Law of Similarity 



Things that are similar in form or color are perceived 

as belonging together 



O O O O O O O 



O O O O O O O 



O O O O O O O 
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Law of Closure 



The human cognition prefers to perceive continuous 
forms and gradients instead of abrupt break offs 




fl 
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Law of Continuity 



The human cognition prefers to follows continuous 

lines 







H 
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Law of Continuity 



• Palmer and Rock (1994) posed that connectivity is stronger than 
proximity, color, size, and form, where continuity assumes connectivity 




Law of Symmetry 



The law of symmetry poses that symmetrical 
positioned constructions are perceived as one 
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Law of Closure 



The law of closure poses that closed contours are 

perceived as object 

• Closed contours define inner and outer parts 
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Law of Relative Size 



The law of relative size poses that smaller 
components in a pattern are recognized as object 
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Law of the Figure-Background Effect 



The differentiation of figure and background is one 
of the basic principles of cognition 
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Contours 



• A contour is defined as perceived boundary between two regions of a 
visual image 

• A contour can be defined as 



- Line 

A boundary between two regions of different color 

- Stereoscopic depth 

- Moving patterns 

- Textures 

It is not completely solved, how 
perception of contours work 

It seems to be a process of neuronal 
level 
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Contours 




Aligned 
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Direction 



• Concepts to represent and perceive direction in images 

• Continuous lines work better, but do not indicate the direction 



M M M I M I 
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Direction 




http://www.eng.utah.edu/~ehan/math6790/project2/images/underneath.png 
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Transparency 



• Representing data and various 
layers can be helpful but also 
could cause problems 

• The perception of transparency is 
based on continuity and the right 
gray shading 
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Transparency 



• The right choice of gray scale can be defined as follows 



x < y < z 
y < z < w 
y > z > w 

Where x, y, z and w are gray 
values 
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Transparency 



• The combination of patterns can be used for representing 
transparency 

• The concept of perceptional inference should be encountered: 
Different textures interfere in different ways: 

- Similar color 

- Similar pattern 

- Similar movement 

- Similar frequency 
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One Minute Paper 



• Used as Feedback from you to me 

• Anonymous 

• Take a piece of paper and use for front 

for positive feedback and the back for 
negative feedback 

• Do this at the end of the lecture 




• This will be repeated at in January and at 
the end of the course. 
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